<template>
    <div>
          <header class="search-header">
      <nav class="songs">
        <div class="fenl">
           <router-link  to="/fenglei"> 
          <img src="../public/images/分类.png" alt="">
          </router-link> 
        </div>
        <van-search class="guanjian" v-model="value" placeholder="请输入搜索关键词" />
        <div class="liaot">
          <img src="../public/images/聊天.png" alt="">
        </div>
      </nav>
    </header>
    </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router';
import { ref } from 'vue';
const value = ref('');
export default {

}
</script>

<style scoped lang="less">
.search-header {
  background-color: #fff;
  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.songs {
  display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.2rem;
}
.liaot{
  width: 1.5rem;
  img{
    width: 1.5rem;
  }
}
.guanjian{
  color: #eeeeee;
  width: 20.5rem;
  height: 2.5rem;
}

</style>